/**
 * Created by luqian_pc on 2018/1/25.
 */
import React, { Component } from 'react';
import {
    Text, View, Image, TouchableOpacity, Platform, StyleSheet, Dimensions, TextInput, KeyboardAvoidingView,ScrollView
} from 'react-native';
import Resolution from '../tool/Resolution'
var { width, height } = Dimensions.get('window');

export default class login extends Component {
    constructor(props) {
        super(props);
        this.state = {
            userName: '',
            password: ''
        }
    }

    loginFn() {
        let { userName, password } = this.state
        if (userName === '' || password === '') {
            alert('请填写账号密码')
        }
        else {
            alert(this.state.userName + ',' + this.state.password)
        }

    }
    render() {
        return (
            <View style={{ width: width, height: height, backgroundColor: '#26283f' }}>
                <Resolution.FixWidthView>
                    
                        <View style={{ marginTop: 100, justifyContent: 'center', flexDirection: 'row' }}>
                            <Text style={{ fontSize: 40, color: '#fff', paddingBottom: 20, borderBottomColor: '#ff1747', borderBottomWidth: 2 }}>登录</Text>
                        </View>
                        <View style={{ justifyContent: 'center', flexDirection: 'row', marginTop: 100 }}><Image source={require('../img/logo2.png')} style={{ width: 155, height: 165 }} /></View>
                        <View style={{ flexDirection: 'row', justifyContent: 'center' }}>
                            <View style={{ width: 500, height: 100, borderColor: '#272940', borderBottomWidth: 2, marginTop: 50 }}>
                                <TextInput
                                    maxLength={12}
                                    style={{ height: 100, width: 500, fontSize: 30, color: '#fff', textAlign: 'center' }}
                                    placeholder={'请输入账号'}
                                    placeholderTextColor={'#fff'}
                                    onChangeText={(userName) => this.setState({ userName })}
                                    value={this.state.userName}
                                    underlineColorAndroid={'transparent'}
                                />
                            </View>
                        </View>
                        
                        <KeyboardAvoidingView behavior={'position'}>
                            <View style={{ flexDirection: 'row', justifyContent: 'center' }}>
                                <View style={{ width: 600, height: 100, borderColor: '#272940', borderBottomWidth: 2, marginTop: 50 }}>
                                    <TextInput
                                        maxLength={12}
                                        password={true}
                                        style={{ height: 100, width: 600, fontSize: 30, color: '#fff', textAlign: 'center' }}
                                        placeholder={'请输入密码'}
                                        placeholderTextColor={'#fff'}
                                        onChangeText={(password) => this.setState({ password })}
                                        value={this.state.password}
                                        underlineColorAndroid={'transparent'}
                                    />
                                </View>

                            </View>
                        </KeyboardAvoidingView>
                 
                    <TouchableOpacity onPress={this.loginFn.bind(this)}>
                        <View style={{ flexDirection: 'row', justifyContent: 'center', marginTop: 50 }}>
                            <View style={{ width: 600, height: 100, backgroundColor: '#ff1747', borderRadius: 40, justifyContent: 'center', alignItems: 'center' }}><Text style={{ color: '#fff', fontSize: 40 }}>登录</Text></View>
                        </View>
                    </TouchableOpacity>
                    
                   
                </Resolution.FixWidthView>
            </View>
        );
    }
}